<template>
    <div class="mediaD">
        <el-upload ref="uploadfile"  :action="url" :auto-upload="false" :on-change="uploadChange" :show-file-list="false" class="addMedia">
            <el-button type="primary" icon="el-icon-plus">添加</el-button>
        </el-upload>
        <div class="sidebar">
            <el-menu  default-active="1" class="el-menu-vertical-demo" mode="horizontal" theme="dark" unique-opened @select="changeItem">           
                <el-menu-item v-for="item in items" :index="item.value" :key="item.value">
                    {{ item.name }}
                </el-menu-item>                 
            </el-menu>
        </div>
        <div class="mediaContent">
            <div class="cards">
                <el-card class="box-card" v-for="data in datas" :key="data.pkid" v-if='data.mediaType==2||data.mediaType==3||data.mediaType==4'>
                    <div slot="header" class="clearfix">
                        <div class="mediaName" :title="data.mediaName">{{ data.mediaName }}</div>
                        <el-button type="primary" icon="el-icon-delete" title="删除" @click="handDelete(data.pkid)"></el-button>                      
                    </div>
                    <div class="text item">
                        <el-popover  v-if="mediaType==3 || mediaType==4" placement="right-end" width="400" trigger="hover"><img style="width:100%;" :src="archiveUrl+'/'+data.mediaID"/><img  style="max-width:100%;max-height: 100%;vertical-align:middle" :src="archiveUrl+'/'+data.mediaID" slot="reference" title="点击进行文件下载" @click="downFile(data.mediaID)"/></el-popover>
                        <img v-if="mediaType==2" style="max-width:100%; max-height: 100%;vertical-align:middle" src="../../../static/img/File.png"  title="点击进行文件下载" @click="downFile(data.mediaID)"/>
                    </div>
                </el-card>
                <ul  v-for="(data,index) in datas" :key="data.pkid" v-if='data.mediaType==1||data.mediaType==5'>
                    <li style="margin-top:5px"  ><span @click="downFile(data.mediaID)" title="点击进行文件下载" style="cursor:pointer"><span style='margin-right: 5px' >{{index+1+"."}}</span>{{data.mediaName+"("+data.createTime+")"}}</span><i class="el-icon-delete"  title="删除" @click="handDelete(data.pkid)" style="float:right;cursor:pointer"></i></li>
                </ul>
            </div>
            <div class="pagination-div">
                <el-pagination
                @current-change="handleCurrentChange"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div> 
        
    </div>  
</template>
<script>
     import date_formate from "../tool/Global/dateutil.js";
    import {ServiceConfig,mediaType} from "../tool/Global/app-config.js";
    import {queryProjectMediaByScheduleid,addProjectMedia,deleteProjectMedia} from "../tool/Global/app-mgr.js";
    export default {
         props: ['progressId'],
         data:function(){
             return{
                 imgVisible:false,
                 items:mediaType,
                 mediaImgUrl:"",
                 datas:[],
                 pagesize:6,
                 pageindex:1,
                 total:0,
                 url:"",
                 archiveUrl:ServiceConfig.archiveUrl,
                 mediaType:"1",
                 specialM:[]
             }
        },
        mounted:function(){
            let ref = this;
            queryProjectMediaByScheduleid(this.progressId,{pagesize:this.pagesize,pageindex:this.pageindex,mediaType:this.mediaType}).then(function(result){
                ref.datas = result.data.data.datalist;
                 ref.datas.forEach(function(item){
                    item.createTime = date_formate.format(new Date(item.createTime ),"yyyy/MM/dd");
                    if(item.mediaType==1 || item.mediaType==5){
                        ref.specialM.push(item);
                    }
                })
                ref.total = result.data.data.total;
            })
        },
        methods:{
            getDatas(){
                let ref = this;
                ref.specialM = [];
                queryProjectMediaByScheduleid(this.progressId,{pagesize:this.pagesize,pageindex:this.pageindex,mediaType:this.mediaType}).then(function(result){
                    ref.datas = result.data.data.datalist;
                    ref.datas.forEach(function(item){
                        item.createTime = date_formate.format(new Date(item.createTime ),"yyyy/MM/dd");
                        if(item.mediaType==1 || item.mediaType==5){
                            ref.specialM.push(item);
                        }
                    })
                    ref.total = result.data.data.total;
                })
            },
            handleCurrentChange(val){
                this.pageindex = val;
                this.getDatas();
            },
            uploadChange(file, fileList){
                let ref = this;
                if(file.size / 1024 / 1024 > 15 && this.mediaType==3){
                    this.$message(file.name + "大小超过15M");       
                }else{
                    this.uploadFormData = new FormData();
                    this.uploadFormData.append('projectMedia',JSON.stringify({scheduleID: this.progressId,mediaType:this.mediaType}));
                    if(file){
                        this.uploadFormData.append("file",file.raw);
                    }
                    addProjectMedia(this.uploadFormData).then(function(result){
                        if(result.data.success){
                            ref.$message({message:"添加成功",type:"success"});
                            ref.getDatas();
                        }else{
                              ref.$message.error(result.data.message);
                        }
                    })  
                } 
            },
            handDelete(pkid){
                let ref = this;
                this.$confirm('确认删除？')
                .then(_ => {
                    deleteProjectMedia(pkid).then(function(result){
                        if(result.data.success){
                            ref.$message({message:"删除成功",type:"success"});
                            ref.getDatas();
                        }else{
                            ref.$message.error(result.data.message);
                        }
                    })
                })
                .catch(_ => {});  
            },
            downFile(id){
               window.location.href = this.archiveUrl+'/'+ id;
            },
            changeItem(index){
                this.mediaType = index;
                let ref = this;
                queryProjectMediaByScheduleid(this.progressId,{pagesize:this.pagesize,pageindex:this.pageindex,mediaType:this.mediaType}).then(function(result){
                    ref.datas = result.data.data.datalist;
                    ref.total = result.data.data.total;
                })
            }              
        }

    
    }
</script>
<style scoped>
    ul li{
        list-style-type:none
    }
    .mediaD{
        clear: both;
    }
    .mediaContent{
        display: inline-block;
        width: 90%;   
        border-left: solid 1px #e6e6e6;
        padding-left: 2%;
    }    
    .box-card{
        width:250px;
        margin-right: 20px;
        display: inline-block;
        height: 230px;
    } 
    .pagination-div{
        text-align: center;
        clear: both;
        padding-top: 20px;
    }
    .item{
        text-align: center;
        width: 217px;
        height: 100px;
    }
    .addMedia{
        margin-bottom: 20px;
    }
    .el-menu{
        border-right: 0px;
    }
    .cards{
        min-height: 200px;
        max-height: 600px;
        overflow: auto;
    }
    .mediaName{
        width:150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        cursor:default;
        float: left;
        height: 40px;
        line-height: 40px;
    }
    .item img{
        cursor: pointer;
    }
</style>


